<!-- author: xuett -->
<!-- date: 2025-03-14 16:47:34 -->
<!-- description: 右侧智能助手 -->
<template>
  <div class="right-helper">
    <div class="title1">你好，你的超级助手已上线！</div>
    <div class="title2">系统集成DeepSeek+商汤商量+商汤小浣熊+商汤格物+商汤秒画+商汤如影数字人等多种模型</div>
    <!-- 提示词库 -->
    <div class="word-library">
      <div class="library-title">系统内设提示词语料库</div>
      <div class="word-box">
        <div :class="['word-item', activeWord.id == word.id ? 'active-word' : '']" v-for="word in wordList" :key="word.id" @click="selectWord(word)">
          {{ word.title }}
        </div>
      </div>
    </div>
    <!-- 对话窗口 -->
    <div class="dialog-window">
      <img class="dialog-logo" src="@/assets/images/container/ai_logo.png" />
      <div class="dialog-content">
        <!-- 对话内容编辑框 -->
        <div ref="editRef" id="editContent" contenteditable="true" @focus="hidePlaceholder" @blur="showPlaceholder()" @input="inputChange"></div>
        <!-- 对话框操作栏 -->
        <div class="dialog-footer">
          <!-- 切换模式：本地版 -->
          <div class="left-mode">
            <el-dropdown class="mode-select">
              <div class="mode-select-title">
                本地版
                <el-icon class="expand-icon"><ArrowDownBold /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item> 本地版 </el-dropdown-item>
                  <el-dropdown-item> 在线版 </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <!-- 发送按钮 -->
          <div v-show="!sendLoading" class="send-btn" @click="sendMsg"></div>
          <div v-show="sendLoading" class="send-loading">
            <img class="loading-img" src="@/assets/images/container/send_loading.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import api from "@/service/container";
import { createVNode, render } from "vue";
import newWord from "./components/newWord.vue";

const $emit = defineEmits(["fillContent"]);

const editRef = ref();
const state = reactive({
  activeWord: {},
  wordList: [
    { title: "专业简介", id: 1 },
    { title: "专业培养目标", id: 2 },
    { title: "专业核心能力", id: 3 },
    { title: "专业核心能力", id: 4 },
    { title: "专业核心课程与主要实践环节", id: 5 },
    { title: "就业面向", id: 6 },
    { title: "其他", id: 7 }
  ],
  sendLoading: false
});
const { activeWord, wordList, sendLoading } = toRefs(state);

onMounted(() => {
  clearDialogWindow();
});

onBeforeUnmount(() => {
  clearDialogWindow();
});

// 获取提示词
const getCueWord = (templateId) => {
  api.getWordByTemplateId({ templateId: templateId }).then((res) => {
    if (Array.isArray(res.data) && res.data.length) {
      state.wordList = res.data;
    } else {
      state.wordList = [];
      state.activeWord = {};
    }
    clearDialogWindow();
  });
};

//清空对话框
const clearDialogWindow = () => {
  editRef.value.innerHTML = "";
  state.activeWord = {};
  showPlaceholder();
};

//选择提示词
let vnode = null;
const selectWord = (val) => {
  state.activeWord = val;
  editRef.value.innerHTML = "";
  //先清除渲染
  if (vnode) {
    render(null, editRef.value);
    vnode = null;
  }
  // 组件对象，组件的 props
  vnode = createVNode(newWord, { activeWord: val });
  //render： 将组件的虚拟DOM转换成真实DOM并插入到编辑框元素里
  render(vnode, editRef.value);
  showPlaceholder();
};

//对话框，监听输入
const inputChange = () => {};

//判断对话框是否显示placeholder
const showPlaceholder = () => {
  if (!hasTextContent()) {
    const placeholderSpan = document.createElement("span");
    placeholderSpan.classList.add("edit-placeholder");
    placeholderSpan.style.cssText = "font-family: Alibaba PuHuiTi-Regular; font-size: 14px; color: rgba(0,0,0,0.3);";

    placeholderSpan.textContent = state.activeWord.title ? "请输入" + state.activeWord.title : "请输入提示词";
    editRef.value.appendChild(placeholderSpan);
  }
};

const hidePlaceholder = () => {
  const placeholder = editRef.value.querySelector(".edit-placeholder");
  if (placeholder) {
    placeholder.remove();
  }
};
//判断是否除提示词外有其他内容
const hasTextContent = () => {
  const allChildNodes = editRef.value.childNodes;
  let hasText = false;
  for (let i = 0, len = allChildNodes.length; i < len; i++) {
    const node = allChildNodes[i];
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length) {
      hasText = true;
      break;
    }
  }

  return hasText;
};

//发送
const sendMsg = () => {
  let msg = "";
  const allChildNodes = editRef.value.childNodes;
  for (let i = 0, len = allChildNodes.length; i < len; i++) {
    const node = allChildNodes[i];
    msg += node.textContent;
  }
  $emit("fillContent", { id: "l00001", value: msg });
};

defineExpose({ getCueWord });
</script>

<style scoped lang="scss">
.right-helper {
  box-sizing: border-box;
  width: 410px;
  height: 100%;
  padding: 40px 14px 20px;
  background-image: url("@/assets/images/container/ai_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .title1 {
    font-family: Alibaba PuHuiTi-Medium;
    font-size: 26px;
    color: #000000;
    line-height: 36px;
    text-align: center;
    margin-bottom: 30px;
  }
  .title2 {
    width: 100%;
    padding: 0 48px;
    font-family: Alibaba PuHuiTi-Regular;
    font-size: 20px;
    color: #000000;
    line-height: 23px;
    margin-bottom: 50px;
  }
  .word-library {
    width: 100%;
    padding: 0 14px 0 10px;
    .library-title {
      font-family: Alibaba PuHuiTi-Bold;
      font-weight: bold;
      font-size: 16px;
      color: #000000;
      line-height: 19px;
    }
    .word-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .word-item {
        height: 39px;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        padding: 0 14px;
        line-height: 37px;
        font-family: Alibaba PuHuiTi-Regular;
        font-size: 14px;
        color: #000000;
        margin: 16px 14px 0 0;
        cursor: pointer;
        &:hover {
          background-color: #54dcad;
          color: #ffffff;
        }
      }
      .active-word {
        background-color: #54dcad;
        color: #ffffff;
      }
    }
  }
  .dialog-window {
    width: calc(100% - 28px);
    position: absolute;
    bottom: 20px;
    left: 14px;
    .dialog-logo {
      display: block;
      width: 80px;
    }
    .dialog-content {
      width: 100%;
      height: 180px;
      padding: 15px 15px 44px 20px;
      background: #ffffff;
      box-shadow: 0px 10px 20px 0px rgba(28, 164, 255, 0.15);
      border-radius: 16px;
      border: 1px solid #0057ff;
      position: relative;
      #editContent {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        font-family: Alibaba PuHuiTi-Regular;
        font-size: 14px;
        color: #000000;
        line-height: 16px;
        border: none;
        outline: none;
      }

      .dialog-footer {
        width: 100%;
        padding: 0 15px 0 20px;
        position: absolute;
        left: 0;
        bottom: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-mode {
          .mode-select {
            font-family: Alibaba PuHuiTi-Regular;
            font-size: 14px;
            color: #000000;
            line-height: 16px;
            cursor: pointer;
            user-select: none;
            :deep(.el-tooltip__trigger) {
              outline: none;
              border: none;
            }
            .mode-select-title {
              display: flex;
              align-items: center;
            }
            .expand-icon {
              margin-left: 5px;
            }
          }
        }
        .send-btn {
          width: 30px;
          height: 30px;
          background-image: url("@/assets/images/container/send.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
          &:hover,
          .active-send {
            background-image: url("@/assets/images/container/send_active.png");
          }
        }
        .send-loading {
          width: 30px;
          height: 30px;
          position: relative;
          .loading-img {
            display: block;
            width: 100%;
            height: 100%;
            animation: rotate 2s linear infinite;
          }
        }
      }
    }
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
